<template>
    <div>
        <div class="preview-top">
            <div class="preview-top1">
                <div class="preview-top-content">
                    <div>
                        <span class="preview-title" v-text="courseName"></span>
                        <span class="preview-line" v-if="learningResourcesData.length > 0 || otherResourcesData.length > 0 || presetResourcesData.length > 0">/</span>
                        <span v-text="chapterName"></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="no-data-tips" v-if="learningResourcesData.length == 0 && otherResourcesData.length == 0 && presetResourcesData.length == 0">
             <img src="./../../../assets/images/index_no_data.png" />
             <p>暂无内容</p>
        </div>
        <div class="jx-content" v-else>
            <button @click="ControlDialog" class="button-style muchControl" v-if="roles == 'TEACHER' || roles == 'MARKET_TEACHER'">批量控制</button>
            <button class="button-style muchControl disabled" :disabled="true" v-if="roles == 'UNIVERSITY_TEACHER'">批量控制</button>
            <div class="jx-resource-list" v-if="learningResourcesData.length > 0">
                <h3 class="title">教学资源</h3>
                <div class="fileBox">
                    <ul>
                        <li v-for="(item, index) in learningResourcesData">
                            <img :src="item.iconPath" />
                            <p class="typeName" v-text="item.name"></p>
                            <p class="fileName" style="color: #ddd;" v-if="!item.fileName">暂无资源</p>
                            <p class="fileName" v-else v-text="item.fileName"></p>
                            <p class="fileBtnBox">
                                <i class="iconfont icon-yanjing-xiexian disabled" title="学生端资源显隐" v-if="roles == 'UNIVERSITY_TEACHER'"></i>
                                <i class="iconfont icon-yanjing" title="学生端资源显隐" v-if="(roles == 'TEACHER' || roles == 'MARKET_TEACHER') && item.teacherOpenSwitch" @click="Control(5,item.name,false)"></i>
                                <i class="iconfont icon-yanjing-xiexian" title="学生端资源显隐" v-if="(roles == 'TEACHER' || roles == 'MARKET_TEACHER') && !item.teacherOpenSwitch" @click="Control(5,item.name,true)"></i>
                                <i class="iconfont icon-xiazai" title="资源下载" v-if="item.download && item.fileName" @click="downloadFile(item.remark,item.fileName)"></i>
                                <i class="iconfont icon-xiazai disabled" title="资源下载" v-else></i>
                            </p>
                        </li>
                    </ul>
                    <i class="clear-fix"></i>
                </div>
            </div>
            <div class="jx-resource-list" v-if="otherResourcesData.length > 0">
                <h3 class="title">其他资源</h3>
                <div class="fileBox">
                    <ul>
                        <li v-for="(item, index) in otherResourcesData">
                            <img :src="item.iconPath" />
                            <p class="typeName" v-text="item.name"></p>
                            <p class="fileName" style="color: #ddd;" v-if="!item.fileName">暂无资源</p>
                            <p class="fileName" v-else v-text="item.fileName"></p>
                            <p class="fileBtnBox">
                                <i class="iconfont icon-yanjing-xiexian disabled" title="学生端资源显隐" v-if="roles == 'UNIVERSITY_TEACHER'"></i>
                                <i class="iconfont icon-yanjing" title="学生端资源显隐" v-if="(roles == 'TEACHER' || roles == 'MARKET_TEACHER') && item.teacherOpenSwitch" @click="Control(6,item.name,false)"></i>
                                <i class="iconfont icon-yanjing-xiexian" title="学生端资源显隐" v-if="(roles == 'TEACHER' || roles == 'MARKET_TEACHER') && !item.teacherOpenSwitch" @click="Control(6,item.name,true)"></i>
                                <i class="iconfont icon-xiazai" title="资源下载" v-if="item.download && item.fileName" @click="downloadFile(item.remark,item.fileName)"></i>
                                <i class="iconfont icon-xiazai disabled" title="资源下载" v-else></i>
                            </p>
                        </li>
                    </ul>
                    <i class="clear-fix"></i>
                </div>
            </div>
            <div class="jx-resource-list" v-if="presetResourcesData.length > 0">
                <h3 class="title">预置资源</h3>
                <div class="fileBox">
                    <ul>
                         <li v-for="(item, index) in presetResourcesData">
                            <img :src="item.iconPath" />
                            <p class="typeName" v-text="item.name"></p>
                            <p class="fileName" v-text="item.fileName"></p>
                            <p class="fileBtnBox">
                                <i class="iconfont icon-xiazai" title="资源下载" v-if="item.download && item.fileName" @click="downloadFile(item.remark,item.fileName)"></i>
                                <i class="iconfont icon-xiazai disabled" title="资源下载" v-else></i>
                            </p>
                        </li>
                    </ul>
                    <i class="clear-fix"></i>
                </div>
            </div>
            <el-dialog
                title="批量控制"
                :visible.sync="dialogVisible"
                width="490px"
                id="ymuchControl"
                :modal-append-to-body="false"
                :close-on-click-modal="false"
                >
                <div class="headBox"><span><i class="iconfont icon-jingshi"></i>&emsp;该功能批量控制学生端教学资源的显示/隐藏</span></div>
                <div class="contentBox">
                    <ul>
                        <li>
                            <i>学习课件</i>
                            <el-switch
                                class="switches"
                                v-model="value1"
                                :width="34"
                                active-color="#13ce66"
                                inactive-color="#b5c2ca">
                            </el-switch>
                        </li>
                        <li>
                            <i>实验视频</i>
                            <el-switch
                                class="switches"
                                v-model="value2"
                                :width="34"
                                active-color="#13ce66"
                                inactive-color="#b5c2ca">
                            </el-switch>
                        </li>
                        <li>
                            <i>实验手册</i>
                            <el-switch
                                v-model="value3"
                                class="switches"
                                :width="34"
                                active-color="#13ce66"
                                inactive-color="#b5c2ca">
                            </el-switch>
                        </li>
                        <li>
                            <i>理论视频</i>
                            <el-switch
                                v-model="value4"
                                class="switches"
                                :width="34"
                                active-color="#13ce66"
                                inactive-color="#b5c2ca">
                            </el-switch>
                        </li>
                        <li>
                            <i>随堂练习</i>
                            <el-switch
                                v-model="value5"
                                class="switches"
                                :width="34"
                                active-color="#13ce66"
                                inactive-color="#b5c2ca">
                            </el-switch>
                        </li>
                         <li>
                            <i>随堂答案</i>
                            <el-switch
                                v-model="value6"
                                active-color="#13ce66"
                                class="switches"
                                :width="34"
                                inactive-color="#b5c2ca">
                            </el-switch>
                        </li>
                        <li>
                            <i>备课材料</i>
                            <el-switch
                                v-model="value7"
                                active-color="#13ce66"
                                class="switches"
                                :width="34"
                                inactive-color="#b5c2ca">
                            </el-switch>
                        </li>
                        <li>
                            <i>课程材料</i>
                            <el-switch
                                v-model="value8"
                                active-color="#13ce66"
                                class="switches"
                                :width="34"
                                inactive-color="#b5c2ca">
                            </el-switch>
                        </li>
                        <li>
                            <i>其他资源</i>
                            <el-switch
                                v-model="value9"
                                active-color="#13ce66"
                                class="switches"
                                :width="34"
                                inactive-color="#b5c2ca">
                            </el-switch>
                        </li>
                    </ul>
                    <div class="clear-fix"></div>
                </div>
                <span slot="footer" class="dialog-footer">
                    <button class="button-style" @click="ControlSave">确定</button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>
<script>
    export default{
        data(){
            return{
                // 课程ID
                courseId: '',
                // 章节ID
                ChapterId: '',
                // 教学资源data
                learningResourcesData: '',
                // 其他资源data
                otherResourcesData: '',
                // 预置资源data
                presetResourcesData: '',
                // 批量控制弹窗
                dialogVisible:false,
                value1:true,
                value2:true,
                value3:true,
                value4:true,
                value5:true,
                value6:true,
                value7:true,
                value8:true,
                value9:true,
                // 课程名称
                courseName: '',
                // 章节名称
                chapterName: '',
                //登录角色 ''未登录 TEACHER 教师 ADMIN管理员 STUDENT学生
                roles: ''
            }
        },
        created () {
            let self = this
            // 课程ID
            self.courseId = self.$route.query.courseId
            // 章节ID
            self.chapterId = self.$route.query.chapterId
            // 从状态管理获取roles
            self.roles = self.$store.state.user.roles[0]
            // 初始化资源列表
            self.initResourceList()
            // 初始化头部信息
            self.InitHeaderInfo()
        },
        methods: {
            // 初始化头部信息
            InitHeaderInfo() {
                let self = this
                self.$http.get('/tes/course/'+self.courseId+'/chapter/'+self.chapterId).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        // 课程名称
                        self.courseName = res.data.courseName
                        // 章节名称
                        self.chapterName = res.data.chapterName
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 初始化资源列表
            initResourceList() {
                let self = this
                self.$http.get('/tes/course/'+self.courseId+'/chapter/'+self.chapterId+'/detail/resource?type=3').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.learningResourcesData = res.data.learningResources.displayVersion
                        self.otherResourcesData = res.data.otherResources.displayVersion
                        self.presetResourcesData = res.data.presetResource.displayVersion
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 眼睛开关控制
            Control(index, name, controlStatus){
                let self = this
                self.$http.put('/tes/course/'+self.courseId+'/resource-right?operatingType=2',[{
                    chapterId: self.chapterId,
                    resourcesType: index,
                    permission: [
                        {
                            name: name,
                            download: controlStatus,
                        }
                    ]
                }]).then(response =>{
                    let res = response.data
                    if(res.code == '200'){
                        // 初始化页面
                        self.initResourceList()
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
                // self.learningResourcesData[index].teacherOpenSwitch = controlStatus ? false : true
            },
            // 下载资源
            downloadFile(remark, fileName){
                let self = this
                self.$http.post('/tes/course/'+self.courseId+'/chapter/'+self.chapterId+'/resource/file-download/permission',{
                    remark: remark,
                    fileName: fileName
                }).then(response => {
                    let res = response.data
                    if(res.code == '200'){

                        self.downloadAxios(fileName,res.data)
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })

            },
            downloadAxios(fileName,token){
                let self = this
                let downloadElement = document.createElement('a');
                downloadElement.style.display = 'none';
                downloadElement.href = '/tes/course/'+self.courseId+'/chapter/'+self.chapterId+'/resource/file-download?token='+token
                downloadElement.download = fileName; //下载后文件名
                document.body.appendChild(downloadElement);
                downloadElement.click(); //点击下载
                document.body.removeChild(downloadElement); //下载完成移除元素
                // self.$http.get('/tes/course/'+self.courseId+'/chapter/'+self.chapterId+'/resource/file-download?token='+token,{responseType: 'blob'}) .then((response) => {
                //     let contentType = response.headers["content-type"]
                //     // 判断contentType
                //     if(contentType=='application/json;charset=UTF-8'){
                //         self.$message.error(decodeURIComponent(response.headers["code-message"]))
                //     } else {
                //         let blob = new Blob([response.data], {type: response.headers['content-disposition']});
                //         let url = window.URL.createObjectURL(blob);
                //         let downloadElement = document.createElement('a');
                //         downloadElement.style.display = 'none';
                //         downloadElement.href = url;
                //         downloadElement.download = fileName; //下载后文件名
                //         document.body.appendChild(downloadElement);
                //         downloadElement.click(); //点击下载
                //         document.body.removeChild(downloadElement); //下载完成移除元素
                //         window.URL.revokeObjectURL(url);
                //     }
                // }).catch(err => {
                //     console.log(err)
                // })
            },
            // 批量控制弹窗
            ControlDialog() {
                let self = this
                self.$http.post('/tes/course/'+self.courseId+'/resource-right?operatingType=1',[
                    {
                        resourcesType: 5,
                        names: ['理论课学习视频','学习课件','随堂练习','备课材料','实验手册','实验课学习视频','随堂练习答案','课程材料']
                    },
                    {
                        resourcesType: 6,
                        names: []
                    },
                ]).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        for(let i = 0; i < res.data.length; i++){
                            if(res.data[i].remark == '备课材料'){
                                self.value7 = res.data[i].downloaded
                            }
                            if(res.data[i].remark == '学习课件'){
                                self.value1 = res.data[i].downloaded
                            }
                            if(res.data[i].remark == '实验手册'){
                                self.value3 = res.data[i].downloaded
                            }
                            if(res.data[i].remark == '实验课学习视频'){
                                self.value2 = res.data[i].downloaded
                            }
                            if(res.data[i].remark == '理论课学习视频'){
                                self.value4 = res.data[i].downloaded
                            }
                            if(res.data[i].remark == '课程材料'){
                                self.value8 = res.data[i].downloaded
                            }
                            if(res.data[i].remark == '随堂练习'){
                                self.value5 = res.data[i].downloaded
                            }
                            if(res.data[i].remark == '随堂练习答案'){
                                self.value6 = res.data[i].downloaded
                            }
                            if(res.data[i].remark == '其他资源'){
                                self.value9 = res.data[i].downloaded
                            }
                        }
                    }else if(res.code == '404'){
                        // 初始化控制权限
                        self.value1 = true
                        self.value2 = true
                        self.value3 = true
                        self.value4 = true
                        self.value5 = true
                        self.value6 = false
                        self.value7 = false
                        self.value8 = true
                        self.value9 = true
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
                // 打开弹窗
                self.dialogVisible = true
            },
            // 批量控制保存
            ControlSave(){
                let self = this
                self.$http.put('/tes/course/'+self.courseId+'/resource-right?operatingType=1',[
                    {
                        resourcesType: 5,
                        permission: [
                            {
                                name: '理论课学习视频',
                                download: self.value4
                            },
                            {
                                name: '学习课件',
                                download:  self.value1
                            },
                            {
                                name: '随堂练习',
                                download:  self.value5        
                            },
                            {
                                name: '备课材料',
                                download:  self.value7         
                            },
                            {
                                name: '实验手册',
                                download:  self.value3
                            },
                            {
                                name: '实验课学习视频',
                                download:  self.value2
                            },
                            {
                                name: '随堂练习答案',
                                download:  self.value6
                            },
                            {
                                name: '课程材料',
                                download:  self.value8
                            },
                        ]
                    },
                    {
                        resourcesType: 6,
                        allResources: true,
                        download:  self.value9
                    }
                ]).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.$message({
                            message: '批量控制保存成功',
                            type: 'success'
                        })
                        self.initResourceList()
                        // 关闭弹窗
                        self.dialogVisible = false
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            }
        }
    }
</script>
<style>
    #ymuchControl .el-dialog__body{
        padding: 28px 68px;
        font-size: 16px;
    }
    #ymuchControl .el-dialog__body .iconfont{
        color: #207fec;
    }
    #ymuchControl .headBox{
        color: #000000;
        margin-bottom: 38px;
    }
    #ymuchControl .contentBox ul{
        padding: 0 40px;
    }
    #ymuchControl .contentBox li{
        float: left;
        /* width: 120px; */
        height: 15px;
        margin-bottom: 22px;
        font-size: 14px;
    }
     #ymuchControl .contentBox li:nth-of-type(odd){
        margin-right: 33px;
    }
     #ymuchControl .contentBox li .switches{
         float: right;
         margin-left: 22px;
     }
     #ymuchControl .button-style{
         width: 90px;
         padding: 0;
         height: 32px;
     }
     #ymuchControl .dialog-footer{
         display: block;
         text-align: center;
     }
     .el-switch{
         margin-top: -2px
     }
</style>
<style scoped lang="scss">
 @import "./../../../styles/ypublic.scss";
.preview-top {
    height: 60px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
    .preview-top1 {
        width: 100%;
        height: 60px;
        line-height: 60px;
        background: #101937;
        position: fixed;
        top: 0;
        color: #fff;
        font-size: 14px;
        .preview-top-content {
            width:1200px;
            margin:0 auto;
            span{
                margin-right:40px;
            }
            .preview-title {
                font-size: 18px;
                margin-right:0;
            }
            .preview-line{
                margin:0 6px;
            }
        }
    }
    .preview-top2 {
        width: 100%;
        height: 60px;
        line-height: 60px;
        position: fixed;
        top: 80px;
        padding:0;
        font-size: 14px;
        .preview-top-content{
            width:1200px;
            margin:0 auto;
            padding:0 40px;
            .button-style{
                margin-left:20px;
            }
        }
    }
}
.jx-resource-list{
    margin-bottom: 28px;
}
.jx-content{
    position: relative;
    margin-top: 40px;
}
.muchControl{
    position: absolute;
    right: 40px;
    top: 30px;
    height: 32px;
    padding: 0;
    width: 90px;
}
.disabled{
    border-color: #ddd;
    color: #ddd;
    cursor: not-allowed;
    &:hover{
       // background: #fff;
    }
}
.title{
    font-size: $fs16;
    color: $title-gray;
    margin-bottom: 35px;
    font-weight: normal;
}
.fileBox{

    margin-left: 10px;
    border-bottom: 1px solid #e8e8e8;
}
.fileBox>ul>li{
    float: left;
    margin-right: 30px;
    height: 166px;
    width: 166px;
    text-align: center;
    margin-bottom: 14px;
    position: relative;
    &:hover{
        background: #f9f8f8;
        .fileBtnBox{
            display: block;
        }
    }
}
.fileBox>ul>li>img{
    margin-top: 28px;
}
.fileBox>ul>li .typeName{
    margin-top: 10px;
    font-size: $fs16;
    color: #727272;
}
.jx-content .fileBox>ul>li .fileName{
    margin-top: 6px;
    font-size: $fs14;
    color: #727272;
    position: relative;
    height: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fileBox>ul>li .fileBtnBox{
    position: absolute;
    bottom: 12px;
    left: 0;
    width: 100%;
    line-height: 12px;
    text-align: right;
    display: none;
    a,i{
        color: #727272;
    }
}
.fileBox>ul>li .fileBtnBox i.disabled{
    color: #d9d9d9;
}
.fileBox>ul>li .fileBtnBox>i:nth-of-type(1){
    margin-right: 11px;
    cursor: pointer;
}
.fileBox>ul>li .fileBtnBox>i:nth-of-type(2){
    margin-right: 14px;
    cursor: pointer;
}
// 暂无数据
.no-data-tips{
    padding-top: 10%;
    text-align: center;
    &>p{
        margin: 30px 0;
        color: #9999;
        font-size: 16px
    }
}
</style>
